<!DOCTYPE html>
<!--
DOM 0 
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="jquery/jquery-1.11.3.js"></script>
        <script type="text/javascript">
            $(function(){
                //DOM2有效的完成事件的捕获和事件的冒泡
                
                //为所有的对象加点击事件
                var all = $("*");
                //闭包的写法
                all.each(function(){
                    var rel = this;
                    //ie并不支持
                    //ie this.attachEvent("onclick",function(event))
                    this.addEventListener("click",function(event){
                        //获取事件发生的目标
                        //根据不同的浏览器进行判断，
                        event = event?event:window.event;
                        //IE不知道target 而是使用srcElement来代替
                        var target = event.target?event.target:event.srcElement;
                        print("事件捕获--》事件源:"+target.id+","+target.tagName+","+"事件对象:"+this.id+"-->"+this.nodeType);
                        //默认的DOM0 会产生事件冒泡 可以通过
                        //stopPropagation 阻止事件冒泡
                    },true); 
                    this.addEventListener("click",function(event){
                        //获取事件发生的目标
                        //根据不同的浏览器进行判断，
                        event = event?event:window.event;
                        //IE不知道target 而是使用srcElement来代替
                        var target = event.target?event.target:event.srcElement;
                        print("事件冒泡--》事件源:"+target.id+","+target.tagName+","+"事件对象:"+this.id+"-->"+this.nodeType);
                        //默认的DOM0 会产生事件冒泡 可以通过
                        //stopPropagation 阻止事件冒泡
                    },false); 
                });
                function print(txt) {
                    $("#content").append(txt+"<br/>");
                }
            });
        </script>
    </head>
    <body id="body">
        <div id="parent">
            <div id="child">
                点了看一下
            </div>
        </div>
        <div id="content"></div>
    </body>
</html>
